<template>
  <div class="steps clmstart">
    <div class="title">
      <p class="bigtitle">PERSONAL INFORMATION</p>
      <p class="desc">Enter your phone number to confirm your information</p>
    </div>
    <div class="stepcontent">
      <div class="stepcontinfo maxw">
        <el-form :model="regForm" :rules="rules" ref="regForm" class="regfrm">
          <!-- Mobile Number -->
          <el-form-item class="ritem" prop="mobile">
            <p class="regtitle"><span>*</span>Your Phone Number</p>
            <el-input v-model="regForm.mobile" placeholder=""></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="btnbox">
      <button type="button" @click="$router.push('/index')">CANCEL</button>
      <button type="button" @click="nextTo('regForm')">NEXT</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      regForm: {
        mobile: "",
      },
      rules: {
        mobile: [
          {
            required: true,
            message: "Please Input Mobile Number",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    window.scrollTo(0, 0);
  },
  methods: {
    nextTo(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.$http
            .post("/getUserInfoByPhone", { phone: this.regForm.mobile })
            .then((res) => {
              loading.close();
              if (res.data.code == 200) {
                let result = res.data.data.info;
                this.$store.commit("setRegInfo", result);
                this.$emit("alreadyto", true);
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning",
                });
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.steps {
  height: auto;
  //
  .title {
    margin: 2rem auto 3rem auto;
    p {
      text-align: center;
    }
    .bigtitle {
      font-size: 2.125rem;
      line-height: 1.3;
      font-family: "RidleyBold";
      color: rgb(28, 28, 28);
      font-style: normal;
      text-align: center;
    }
    .desc {
      font-size: 1.125rem;
      padding-bottom: 0.5rem;
      span {
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
  //内容
  .stepcontent {
    position: relative;
    width: 100%;
    .stepcontinfo {
      .regfrm {
        max-width: 83%;
        margin: auto;
        .ritem {
          margin-bottom: 2rem;
          .regtitle {
            font-family: "RidleyBold";
            font-size: 1.1rem;
            line-height: 1.2;
            padding-bottom: 0.7rem;
            span {
              color: #cc000c;
            }
            a {
              text-decoration: underline;
              color: #0099e0;
            }
          }
          .elitem {
            width: 100%;
          }
          .dietaryCheck {
            .specifyipt {
              width: 300px;
              margin-left: 1.5rem;
            }
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 600px) {
  .steps {
    .title {
      margin-bottom: 2rem;
      .bigtitle {
        font-size: 1.2rem;
      }
      .desc {
        font-size: 0.7rem;
      }
    }
    .stepcontent {
      .stepcontinfo {
        .regfrm {
          .ritem {
            margin-bottom: 1rem;
            .regtitle {
              font-size: 0.9rem;
            }
          }
          .fapiaoinfo {
            .error {
              font-size: 0.9rem;
            }
          }
        }
      }
    }
  }
}
</style>
<style>
/* loading */
.el-loading-mask.is-fullscreen .el-loading-spinner .circular {
  width: 80px !important;
  height: 80px !important;
}
.el-loading-spinner .path {
  stroke: #f18f61 !important;
}
</style>
